<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建纹理贴图</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <link rel="stylesheet" href="common.css">
</head>

<body>

</body>
<script>
    TextureLoader()

    // 创建模型
    function sphereMesh(geometry, material) {
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 20, 0);
        mesh.name = "test"
        return mesh;
    }


    // 创建纹理贴图（给模型贴图）
    function TextureLoader() {
        let scene = new THREE.Scene(); // 创建场景
        var textureLoader = new THREE.TextureLoader();
        textureLoader.load('image/35.jpg', function(texture) {
            var material = new THREE.MeshLambertMaterial({
                map: texture, //设置颜色贴图属性值
            });
            var geometry = new THREE.BoxGeometry(60, 60, 60);
            var mesh = sphereMesh(geometry, material);
            scene.add(mesh);
            renderCanvas(scene)
        })
    }

    // 渲染相关设置
    function renderCanvas(scene) {
        // 【设置光源-聚光灯-环境光】
        let spotLight = new THREE.SpotLight(0xffffff);
        let AmbientLight = new THREE.AmbientLight(0x0000ff, 0.6);
        spotLight.angle = Math.PI / 6 // 设置聚光光源发散角度
        spotLight.position.set(40, 150, 80);
        spotLight.shadowDarkness = 0.3;
        spotLight.castShadow = true; // 设置灯光生成阴影
        scene.add(spotLight, AmbientLight);
        // 【相机设置】
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //创建相机对象
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //设置辅助线
        var axisHelper = new THREE.AxisHelper(600); // 辅助坐标系
        scene.add(axisHelper);
        // 【第四步：渲染对象】
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 0.3); //设置背景颜色
        renderer.shadowMap.enabled = true; //渲染阴影
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        renderer.render(scene, camera); //执行渲染操作（场景、相机）
    }
</script>

</html>